<!-- 验证界面 -->
<template>
  <div class="login-container">
    <div class="login-header">
      <div class="back-button" @click="goBack">
        <span>&lt;</span>
      </div>
      <div class="header-title">登录/注册</div>
    </div>
    
    <div class="login-content">
      <div class="avatar-placeholder">
        <img src="../assets/shunf.png" alt="顺丰logo">
      </div>
      
      <div class="slogan">一路相伴  不负所托</div>

      <div class="input-group">
        <input 
          type="text" 
          v-model="phoneNumber" 
          placeholder="请输入手机号码"
          maxlength="11"
          class="phone-input"
        >
        <button 
          class="verify-code-btn" 
          :disabled="!isPhoneValid || cooldown > 0"
          @click="getVerifyCode"
        >
          {{ cooldown > 0 ? `${cooldown}s后重新获取` : '获取验证码' }}
        </button>
      </div>
      <div class="verify-code-group" v-show="showVerifyInput">
        <input 
          type="text" 
          v-model="verifyCode" 
          placeholder="请输入验证码"
          maxlength="6"
          class="verify-code-input"
        >
      </div>
      
      <!-- 登录按钮 -->
      <button 
        v-show="showVerifyInput" 
        class="login-button"
        @click="handleLogin"
      >
        登录
      </button>
    </div>

    <!-- 验证码提示框 -->
    <div class="tip-modal" v-if="showTipModal" @click="closeTipModal">
      <div class="tip-content" @click.stop>
        验证码：{{ generatedCode }}
      </div>
    </div>

    <div class="customer-service">
        遇到问题？拨打客服电话<span class="phone-number">95338</span>
      </div>
  </div>
</template>

<script>
export default {
  name: 'PhoneVerify',
  data() {
    return {
      phoneNumber: '',
      cooldown: 0,
      timer: null,
      showVerifyInput: false,
      verifyCode: '',
      showTipModal: false,
      generatedCode: ''
    }
  },
  computed: {
    isPhoneValid() {
      return /^1[3-9]\d{9}$/.test(this.phoneNumber)
    }
  },
  methods: {
    goBack() {
      this.$router.push('/my-page')
    },
    // 生成6位随机数字验证码
    generateVerifyCode() {
      let code = '';
      for(let i = 0; i < 6; i++) {
        code += Math.floor(Math.random() * 10);
      }
      return code;
    },
    getVerifyCode() {
      if (!this.isPhoneValid) return;
      
      // 开始倒计时
      this.cooldown = 60;
      this.timer = setInterval(() => {
        if (this.cooldown > 0) {
          this.cooldown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);

      // 显示验证码输入框
      this.showVerifyInput = true;

      // 生成并显示验证码
      this.generatedCode = this.generateVerifyCode();
      this.showTipModal = true;
    },
    handleLogin() {
      if (this.verifyCode === this.generatedCode) {
        // 保存用户信息到localStorage
        const userInfo = {
          phone: this.phoneNumber,
          isLoggedIn: true
        };
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        
        // 跳转到MyPage
        this.$router.push('/my-page');
      } else {
        alert('验证码错误，请重新输入');
      }
    },
    closeTipModal() {
      this.showTipModal = false;
    }
  },
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
}

.login-header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}

.back-button {
  position: absolute;
  left: 15px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.login-content {
  padding: 40px 20px;
}

.avatar-placeholder {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slogan {
  text-align: center;
  font-family: "SimHei", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #333;
  margin-bottom: 40px;
  letter-spacing: 10px;
}

.input-group {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.phone-input {
  flex: 1;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
}

.phone-input:focus {
  border-color: #ff4d4f;
}

.verify-code-btn {
  padding: 0 15px;
  background-color: #ff4d4f;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.verify-code-btn:disabled {
  background-color: #ffcccb;
  cursor: not-allowed;
}

.verify-code-group {
  margin-bottom: 20px;
}

.verify-code-input {
  width: 100%;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}

.verify-code-input:focus {
  border-color: #ff4d4f;
}

/* 登录按钮样式 */
.login-button {
  width: 100%;
  height: 44px;
  background-color: #ff4d4f;
  border: none;
  border-radius:5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}

.login-button:hover {
  background-color: #ff3333;
}

/* 提示框样式 */
.tip-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.tip-content {
  background: white;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 客服电话样式 */
.customer-service {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  color: #666;
  z-index: 999;
}

.phone-number {
  color: #ff4d4f;
  font-weight: bold;
}
</style>